/**
 * 布局相关CSS规则模块  
 * @version 1.0.0
 */

import { utils } from '../../../utils/utils.js';

// uni-app x 特殊处理函数 - 优化版本
function getFlexStyles(baseStyles, options = {}) {
    const { platform, fileType } = options;
    
    // 检查是否为 uvue 文件类型
    const isUvue = fileType === 'uvue';
    
    if (platform === 'APP-PLUS' || platform === 'APP-ANDROID' || platform === 'APP-IOS' || isUvue) {
        // 在 uni-app x 和 uvue 中进行优化处理
        
        // 如果已经指定了 flex-direction，直接返回
        if (baseStyles['flex-direction']) {
            return baseStyles;
        }
        
        // 🔥 优化：对于 uvue 中的普通 flex 类名，明确指定 flex-flow: row
        // 这样用户写 flex 时，会同时生成 display: flex 和 flex-flow: row
        if (isUvue && baseStyles.display === 'flex' && !baseStyles['flex-direction']) {
            return {
                ...baseStyles,
                'flex-flow': 'row'  // 使用 flex-flow 简写属性
            };
        }
        
        // uni-app x 默认行为保持不变（column）
        return baseStyles;
    }
    
    // 非 uni-app x 平台，遵循 W3C 标准（默认 row）
    return baseStyles;
}

// 处理布局相关的CSS规则
export function processLayoutRules(className, options = {}) {
    const { platform = 'H5', h5Unit = 'rem', remBase = 16 } = options;
    
    // 弹性布局 - 针对 uni-app x 进行特殊处理
    const flexMap = {
        'flex': getFlexStyles({ display: 'flex' }, options),
        'inline-flex': { display: 'inline-flex' },
        // 显式的方向控制
        'flex-row': getFlexStyles({ display: 'flex', 'flex-direction': 'row' }, options),
        'flex-col': getFlexStyles({ display: 'flex', 'flex-direction': 'column' }, options),
        'flex-row-reverse': getFlexStyles({ display: 'flex', 'flex-direction': 'row-reverse' }, options),
        'flex-col-reverse': getFlexStyles({ display: 'flex', 'flex-direction': 'column-reverse' }, options),
        'flex-wrap': { 'flex-wrap': 'wrap' },
        'flex-nowrap': { 'flex-wrap': 'nowrap' },
        'flex-wrap-reverse': { 'flex-wrap': 'wrap-reverse' },
        'flex-1': { flex: '1 1 0%' },
        'flex-auto': { flex: '1 1 auto' },
        'flex-initial': { flex: '0 1 auto' },
        'flex-none': { flex: 'none' },
        // justify-content 单独使用时不改变方向
        'justify-start': { 'justify-content': 'flex-start' },
        'justify-end': { 'justify-content': 'flex-end' },
        'justify-center': { 'justify-content': 'center' },
        'justify-between': { 'justify-content': 'space-between' },
        'justify-around': { 'justify-content': 'space-around' },
        'justify-evenly': { 'justify-content': 'space-evenly' },
        'items-start': { 'align-items': 'flex-start' },
        'items-end': { 'align-items': 'flex-end' },
        'items-center': { 'align-items': 'center' },
        'items-baseline': { 'align-items': 'baseline' },
        'items-stretch': { 'align-items': 'stretch' },
        
        // align-self 类名（单个flex项目的对齐方式）
        'self-auto': { 'align-self': 'auto' },
        'self-start': { 'align-self': 'flex-start' },
        'self-end': { 'align-self': 'flex-end' },
        'self-center': { 'align-self': 'center' },
        'self-stretch': { 'align-self': 'stretch' },
        'self-baseline': { 'align-self': 'baseline' },
        
        // align-content 类名（多行flex容器的交叉轴对齐）
        'content-start': { 'align-content': 'flex-start' },
        'content-end': { 'align-content': 'flex-end' },
        'content-center': { 'align-content': 'center' },
        'content-between': { 'align-content': 'space-between' },
        'content-around': { 'align-content': 'space-around' },
        'content-evenly': { 'align-content': 'space-evenly' },
        'content-stretch': { 'align-content': 'stretch' },
        // 组合类名，明确指定方向
        'flex-center': getFlexStyles({
            display: 'flex',
            'justify-content': 'center',
            'align-items': 'center' 
        }, options)
    };

    if (flexMap[className]) {
        return flexMap[className];
    }

    // uni-app x 专用 flex 组合类处理
    const uvueFlexMap = {
        // 明确的横向布局组合
        'flex-row-center': { display: 'flex', 'flex-direction': 'row', 'justify-content': 'center', 'align-items': 'center' },
        'flex-row-between': { display: 'flex', 'flex-direction': 'row', 'justify-content': 'space-between', 'align-items': 'center' },
        'flex-row-around': { display: 'flex', 'flex-direction': 'row', 'justify-content': 'space-around', 'align-items': 'center' },
        'flex-row-evenly': { display: 'flex', 'flex-direction': 'row', 'justify-content': 'space-evenly', 'align-items': 'center' },
        
        // 明确的纵向布局组合（利用默认column）
        'flex-col-center': { display: 'flex', 'flex-direction': 'column', 'justify-content': 'center', 'align-items': 'center' },
        'flex-col-between': { display: 'flex', 'flex-direction': 'column', 'justify-content': 'space-between', 'align-items': 'center' },
        'flex-col-around': { display: 'flex', 'flex-direction': 'column', 'justify-content': 'space-around', 'align-items': 'center' },
        'flex-col-evenly': { display: 'flex', 'flex-direction': 'column', 'justify-content': 'space-evenly', 'align-items': 'center' }
    };

    if (uvueFlexMap[className]) {
        return uvueFlexMap[className];
    }

    // 动态 flex 属性支持（根据 uni-app x 文档）
    // 支持 flex-[value] 格式，如 flex-[0_1_50%], flex-[2], flex-[auto] 等
    const flexDynamicMatch = className.match(/^flex-\[(.+)\]$/);
    if (flexDynamicMatch) {
        const [, value] = flexDynamicMatch;
        // 处理下划线分隔的值，如 flex-[0_1_50%] 转换为 0 1 50%
        const flexValue = value.replace(/_/g, ' ');
        return { flex: flexValue };
    }

    // flex-grow 支持
    const flexGrowMatch = className.match(/^(?:flex-grow-|grow-)(\d+)$/);
    if (flexGrowMatch) {
        const [, value] = flexGrowMatch;
        return { 'flex-grow': value };
    }

    // flex-shrink 支持
    const flexShrinkMatch = className.match(/^(?:flex-shrink-|shrink-)(\d+)$/);
    if (flexShrinkMatch) {
        const [, value] = flexShrinkMatch;
        return { 'flex-shrink': value };
    }

    // flex-basis 支持
    const flexBasisMatch = className.match(/^(?:flex-basis-|basis-)(.+)$/);
    if (flexBasisMatch) {
        const [, value] = flexBasisMatch;
        
        // 处理特殊值
        if (value === 'auto') {
            return { 'flex-basis': 'auto' };
        }
        if (value === 'content') {
            // uni-app x 支持 content 值
            return { 'flex-basis': 'content' };
        }
        
        // 处理数值和单位
        const unitMatch = value.match(/^(\d+(?:\.\d+)?)(rpx|px|rem|em|vh|vw|vmin|vmax|%|pt|pc|in|mm|cm)?$/);
        if (unitMatch) {
            const [, numValue, unit] = unitMatch;
            let flexBasisValue;
            
            if (!unit || unit === 'px') {
                flexBasisValue = `${numValue}px`;
            } else if (unit === 'rem') {
                flexBasisValue = platform === 'H5' && h5Unit === 'rem' 
                    ? `${numValue}rem` 
                    : `${numValue * remBase}px`;
            } else if (unit === 'rpx') {
                flexBasisValue = `${numValue}rpx`;
            } else if (unit === '%') {
                flexBasisValue = `${numValue}%`;
            } else {
                flexBasisValue = `${numValue}${unit}`;
            }
            
            return { 'flex-basis': flexBasisValue };
        }
    }

    // 数字化 flex 值支持，如 flex-2, flex-3 等
    const flexNumberMatch = className.match(/^flex-(\d+)$/);
    if (flexNumberMatch) {
        const [, value] = flexNumberMatch;
        return { flex: `${value} ${value} 0%` };
    }

    // order 支持
    const orderMatch = className.match(/^order-(\d+|first|last|none)$/);
    if (orderMatch) {
        const [, value] = orderMatch;
        if (value === 'first') {
            return { order: '-9999' };
        } else if (value === 'last') {
            return { order: '9999' };
        } else if (value === 'none') {
            return { order: '0' };
        } else {
            return { order: value };
        }
    }

    //  布局不支持，根据 uni-app x 文档，display 只支持 flex 和 none
    // 移除所有  相关代码，因为 uvue 不支持  布局

    // box-sizing 盒模型属性
    const boxSizingMap = {
        'box-border': 'border-box',
        'box-content': 'content-box'
    };
    
    if (boxSizingMap[className]) {
        return { 'box-sizing': boxSizingMap[className] };
    }

    // overflow 溢出处理属性
    const overflowMap = {
        'overflow-visible': 'visible',
        'overflow-hidden': 'hidden',
        'overflow-scroll': 'scroll',
        'overflow-auto': 'auto',
        'overflow-clip': 'clip'
    };
    
    if (overflowMap[className]) {
        const overflowValue = overflowMap[className];
        
        // uni-app x 平台兼容性处理
        if (platform === 'APP-PLUS' || platform === 'APP-ANDROID' || platform === 'APP-IOS') {
            // 根据 uni-app x 文档，部分属性支持有限
            if (['scroll', 'auto', 'clip'].includes(overflowValue)) {
                // 对于支持性不确定的属性，可以提供降级方案
                // 这里可以根据实际测试情况调整
                console.warn(`[JZ-UnoCSS] overflow: ${overflowValue} 在 uni-app x 平台可能支持有限`);
            }
            
            // visible 仅 view 组件支持，其他组件不支持
            if (overflowValue === 'visible') {
                console.warn(`[JZ-UnoCSS] overflow: visible 在 uni-app x 平台仅 view 组件支持`);
            }
        }
        
        return { overflow: overflowValue };
    }

    // overflow-x 和 overflow-y 单独控制
    const overflowXMap = {
        'overflow-x-visible': 'visible',
        'overflow-x-hidden': 'hidden',
        'overflow-x-scroll': 'scroll',
        'overflow-x-auto': 'auto',
        'overflow-x-clip': 'clip'
    };
    
    if (overflowXMap[className]) {
        const overflowValue = overflowXMap[className];
        
        // uni-app x 平台兼容性处理
        if (platform === 'APP-PLUS' || platform === 'APP-ANDROID' || platform === 'APP-IOS') {
            if (['scroll', 'auto', 'clip'].includes(overflowValue)) {
                console.warn(`[JZ-UnoCSS] overflow-x: ${overflowValue} 在 uni-app x 平台可能支持有限`);
            }
        }
        
        return { 'overflow-x': overflowValue };
    }

    const overflowYMap = {
        'overflow-y-visible': 'visible',
        'overflow-y-hidden': 'hidden',
        'overflow-y-scroll': 'scroll',
        'overflow-y-auto': 'auto',
        'overflow-y-clip': 'clip'
    };
    
    if (overflowYMap[className]) {
        const overflowValue = overflowYMap[className];
        
        // uni-app x 平台兼容性处理
        if (platform === 'APP-PLUS' || platform === 'APP-ANDROID' || platform === 'APP-IOS') {
            if (['scroll', 'auto', 'clip'].includes(overflowValue)) {
                console.warn(`[JZ-UnoCSS] overflow-y: ${overflowValue} 在 uni-app x 平台可能支持有限`);
            }
        }
        
        return { 'overflow-y': overflowValue };
    }

    // 显示属性 - 根据 uni-app x 文档，display 只支持 flex 和 none
    const displayMap = {
        'block': 'block',
        'inline-block': 'inline-block', 
        'inline': 'inline',
        'hidden': 'none',
        'table': 'table'
        // 移除 '': '' - uvue 不支持  布局
    };
    
    if (displayMap[className]) {
        let displayValue = displayMap[className];
        
        // uni-app x 只支持 flex|none，其他值转换为 flex
        if (platform === 'APP-PLUS' || platform === 'APP-ANDROID' || platform === 'APP-IOS') {
            if (['block', 'inline-block', 'inline', 'table'].includes(displayValue)) {
                displayValue = 'flex';
            }
        }
        
        return { display: displayValue };
    }

    // visibility 属性 - 根据 uni-app x 文档支持 visible 和 hidden
    const visibilityMap = {
        'visible': 'visible',      // 元素可见（默认值）
        'invisible': 'hidden',     // 元素隐藏但占位，对应 visibility: hidden
        'collapse': 'collapse'     // 表格行列专用（虽然uni-app x文档未明确支持，但保留用于兼容）
    };
    
    if (visibilityMap[className]) {
        const visibilityValue = visibilityMap[className];
        
        // 根据 uni-app x 文档，支持 visible 和 hidden 值
        if (visibilityValue === 'visible' || visibilityValue === 'hidden') {
            return { visibility: visibilityValue };
        }
        
        // collapse 值主要用于表格，uni-app x 中可能不支持，但保留兼容
        if (visibilityValue === 'collapse') {
            // 在 uni-app x 中，如果不支持 collapse，可以降级为 hidden
            if (platform === 'APP-PLUS' || platform === 'APP-ANDROID' || platform === 'APP-IOS') {
                console.warn(`[JZ-UnoCSS] visibility: collapse 在 uni-app x 平台可能不支持，降级为 hidden`);
                return { visibility: 'hidden' };
            } else {
                return { visibility: 'collapse' };
            }
        }
    }

    // 定位
    const positionMap = {
        'static': 'static',
        'fixed': 'fixed',
        'absolute': 'absolute',
        'relative': 'relative',
        'sticky': 'sticky'
    };
    
    if (positionMap[className]) {
        const position = positionMap[className];
        // 对于sticky定位，在uni-app x中使用fixed替代
        if (position === 'sticky' && (platform === 'APP-PLUS' || platform === 'APP-ANDROID' || platform === 'APP-IOS')) {
            return { position: 'fixed' };
        }
        return { position: position };
    }

    // 定位偏移量处理 - 新增支持
    // 支持 top-*, bottom-*, left-*, right-* 类名
    const positionOffsetMatch = className.match(/^(top|bottom|left|right)-(.+)$/);
    if (positionOffsetMatch) {
        const [, direction, value] = positionOffsetMatch;
        
        // 处理特殊值
        if (value === 'auto') {
            return { [direction]: 'auto' };
        }
        
        // 处理数值和单位
        const numMatch = value.match(/^(\d+(?:\.\d+)?)(rpx|px|rem|em|vh|vw|vmin|vmax|%)?$/);
        if (numMatch) {
            const [, numValue, unit] = numMatch;
            let offsetValue;
            
            if (!unit || unit === 'px') {
                // 无单位或px单位，转换为px
                offsetValue = `${numValue}px`;
            } else if (unit === 'rem') {
                // rem单位处理
                if (platform === 'H5' && h5Unit === 'rem') {
                    offsetValue = `${numValue}rem`;
                } else {
                    offsetValue = `${numValue * remBase}px`;
                }
            } else if (unit === 'rpx') {
                // rpx单位，保持原样
                offsetValue = `${numValue}rpx`;
            } else if (unit === '%') {
                // 百分比单位
                offsetValue = `${numValue}%`;
            } else {
                // 其他单位保持原样
                offsetValue = `${numValue}${unit}`;
            }
            
            return { [direction]: offsetValue };
        }
        
        // 处理分数值，如 top-1/2, left-1/4 等
        const fractionMatch = value.match(/^(\d+)\/(\d+)$/);
        if (fractionMatch) {
            const [, numerator, denominator] = fractionMatch;
            const percentage = (parseFloat(numerator) / parseFloat(denominator) * 100).toFixed(6);
            return { [direction]: `${parseFloat(percentage)}%` };
        }
        
        // 处理负值，如 top--2, left--4 等（双横线表示负值）
        const negativeMatch = value.match(/^-(\d+(?:\.\d+)?)(rpx|px|rem|em|vh|vw|vmin|vmax|%)?$/);
        if (negativeMatch) {
            const [, numValue, unit] = negativeMatch;
            let offsetValue;
            
            if (!unit || unit === 'px') {
                offsetValue = `-${numValue}px`;
            } else if (unit === 'rem') {
                if (platform === 'H5' && h5Unit === 'rem') {
                    offsetValue = `-${numValue}rem`;
                } else {
                    offsetValue = `-${numValue * remBase}px`;
                }
            } else if (unit === 'rpx') {
                offsetValue = `-${numValue}rpx`;
            } else if (unit === '%') {
                offsetValue = `-${numValue}%`;
            } else {
                offsetValue = `-${numValue}${unit}`;
            }
            
            return { [direction]: offsetValue };
        }
    }

    // inset 类名支持（四个方向同时设置）
    const insetMatch = className.match(/^inset(-x|-y)?-(.+)$/);
    if (insetMatch) {
        const [, direction, value] = insetMatch;
        
        // 处理特殊值
        if (value === 'auto') {
            if (!direction) {
                return { top: 'auto', right: 'auto', bottom: 'auto', left: 'auto' };
            } else if (direction === '-x') {
                return { left: 'auto', right: 'auto' };
            } else if (direction === '-y') {
                return { top: 'auto', bottom: 'auto' };
            }
        }
        
        // 处理数值
        const numMatch = value.match(/^(\d+(?:\.\d+)?)(rpx|px|rem|em|vh|vw|vmin|vmax|%)?$/);
        if (numMatch) {
            const [, numValue, unit] = numMatch;
            let offsetValue;
            
            if (!unit || unit === 'px') {
                offsetValue = `${numValue}px`;
            } else if (unit === 'rem') {
                if (platform === 'H5' && h5Unit === 'rem') {
                    offsetValue = `${numValue}rem`;
                } else {
                    offsetValue = `${numValue * remBase}px`;
                }
            } else if (unit === 'rpx') {
                offsetValue = `${numValue}rpx`;
            } else if (unit === '%') {
                offsetValue = `${numValue}%`;
            } else {
                offsetValue = `${numValue}${unit}`;
            }
            
            if (!direction) {
                // inset-* 四个方向
                return { top: offsetValue, right: offsetValue, bottom: offsetValue, left: offsetValue };
            } else if (direction === '-x') {
                // inset-x-* 左右方向
                return { left: offsetValue, right: offsetValue };
            } else if (direction === '-y') {
                // inset-y-* 上下方向
                return { top: offsetValue, bottom: offsetValue };
            }
        }
        
        // 处理负值
        const negativeMatch = value.match(/^-(\d+(?:\.\d+)?)(rpx|px|rem|em|vh|vw|vmin|vmax|%)?$/);
        if (negativeMatch) {
            const [, numValue, unit] = negativeMatch;
            let offsetValue;
            
            if (!unit || unit === 'px') {
                offsetValue = `-${numValue}px`;
            } else if (unit === 'rem') {
                if (platform === 'H5' && h5Unit === 'rem') {
                    offsetValue = `-${numValue}rem`;
                } else {
                    offsetValue = `-${numValue * remBase}px`;
                }
            } else if (unit === 'rpx') {
                offsetValue = `-${numValue}rpx`;
            } else if (unit === '%') {
                offsetValue = `-${numValue}%`;
            } else {
                offsetValue = `-${numValue}${unit}`;
            }
            
            if (!direction) {
                return { top: offsetValue, right: offsetValue, bottom: offsetValue, left: offsetValue };
            } else if (direction === '-x') {
                return { left: offsetValue, right: offsetValue };
            } else if (direction === '-y') {
                return { top: offsetValue, bottom: offsetValue };
            }
        }
    }
    
    return null;
} 